<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>员工管理</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/layui.css">
	<link rel="stylesheet" href="../css/radio.css">
	<link rel="stylesheet" href="../css/item.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		#portrait {
			width: 100px;
			height: 100px;
		}

		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 90px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.return {
			width: 80px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			margin-left: 130px;
			font-size: 16px;
			border-radius: 4px;
		}

		.add_course .class {
			float: left;
			width: 350px;
			margin-left: 20px;
			position: relative;
		}

		.teachertitle input,
		.gender input {
			margin-left: 20px;
		}

		.name,
		.bindingcode,
		.birthdate,
		.phone,
		.iphone,
		.email,
		.entertime,
		.text {
			background-color: #73c7ec;
			color: white;
		}

		.checkbox {
			width: 15px;
			height: 15px;
		}

		.v-select {
			width: 50%;

		}

		.vs--searchable .vs__dropdown-toggle {
			background-color: white;
		}
	</style>
</head>

<body>

	<div id="vue-root">
		<div class="layui-row" style="margin-bottom: 40px;">
			<div class="layui-col-md6 layui-col-md-offset3">
				<div class="layui-form-item">
					<label class="layui-form-label required">姓名</label>
					<div class="layui-input-block">
						<input name="teacherName" v-validate="'required'" data-vv-as="老师姓名" autocomplete="off"
							placeholder="请输入姓名" class="layui-input name" v-model="item.name">
						<div class="checkout_state" v-text="err('teacherName')"></div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">头像上传</label>
					<label for="File1" id="tu1">
						<img :src="img" id="portrait">
					</label>
					<div class="checkout_state" v-text="err('file')">
					</div>
					<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
						<input type="file" id="File1" data-vv-as="头像" v-validate="'size:10240'" name="file"
							accept="image/*" @change="upload" ref="file">
					</form>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required">绑定码</label>
					<div class="layui-input-block">
						<input autocomplete="off" name="bindCode" data-vv-as="绑定码" v-validate="'required'"
							placeholder="请输入手机号码" @keyup="item.bindCode = item.bindCode.replace(/\s+/g,'')"
							class="layui-input bindingcode" v-model="item.bindCode">
						<div class="checkout_state" v-text="err('bindCode')"></div>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block gender" style="padding-top: 13px;line-height: 15px;">
						<input type="radio" name="sex" :value="true" title="男" v-model="item.sex">
						<span>男</span>
						<input type="radio" name="sex" :value="false" title="女" v-model="item.sex">
						<span>女</span>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">出生日期</label>
					<div class="layui-input-block">
						<input class="layui-input birthdate" name="birthdate" data-vv-as="出生日期" id="birthday"
							v-model="item.birthday">
						<div class="checkout_state" v-text="err('birthdate')"></div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">固定电话</label>
					<div class="layui-input-block">
						<input autocomplete="off" name="tel" data-vv-as="固定电话" placeholder="请输入固定电话"
							class="layui-input phone" v-model="item.tel">
						<div class="checkout_state" v-text="err('tel')"></div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">手机号码</label>
					<div class="layui-input-block">
						<input autocomplete="off" name="phone" data-vv-as="手机号码" v-validate="'phone'"
							placeholder="请输入手机号码" class="layui-input iphone" v-model="item.phone">
						<div class="checkout_state" v-text="err('phone')">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-block">
						<input autocomplete="off" name="email" data-vv-as="邮箱" v-validate="'email'" placeholder="请输入邮箱"
							class="layui-input email" v-model="item.email">
						<div class="checkout_state" v-text="err('email')"></div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">入职时间</label>
					<div class="layui-input-block">
						<input class="layui-input entertime" name="inductionDate" data-vv-as="入职时间" id="inductionDate"
							v-model="item.inductionDate">
						<div class="checkout_state" v-text="err('inductionDate')">
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">职称</label>
					<div class="layui-input-block">
						<input placeholder="请输入职称" class="layui-input name" v-model="item.position">
					</div>
				</div>

				<!-- <div class="layui-form-item">
					<label class="layui-form-label">卡号</label>
					<div class="layui-input-block">
						<input placeholder="请输入卡号" class="layui-input name" v-model="item.cardNo">
					</div>
				</div> -->

				<div class="layui-form-item">
					<label class="layui-form-label">授课班级</label>
					<div class="layui-input-block">
						<v-select placeholder="请选择班级" label="name" :options="classess" :reduce="item=>item.id" multiple
							v-model="item.classesIds"></v-select>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">是否为校长</label>
					<div class="layui-input-block teachertitle" style="padding-top: 13px;line-height: 15px;">
						<input name="checkbox" type="checkbox" class="checkbox" v-model="item.president" />
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">是否接收学生考勤消息</label>
					<div class="layui-input-block teachertitle" style="padding-top: 13px;line-height: 15px;">
						<input name="checkbox" type="checkbox" class="checkbox" v-model="item.receiver" />
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">教学特点</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入教学特点" name="feature" data-vv-as="教学特点" class="layui-textarea text"
							v-model="item.feature"></textarea>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<div class="offer" @click="submit">立即提交</div>
						<div class="return" onclick="history.back()">取消</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>


	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>


	<script src="../lib/laydate/laydate.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>

		var schoolId = top_params().id;
		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue(merge({
			data: {
				item: {
					avatar: null,
					title: 0,
					birthday: null,
					inductionDate: null,
					sex: true,
					schoolId: schoolId,
					classesIds: []
				},
				classess: [],
				url: '/pc/teacher/new'
			},
			created: function () {
				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					this.classess = res.data;
				}.bind(this));
				this.init();
			},
			methods: {
				formatData: function (data) {
					if (data.birthday) data.birthday = dayjs(data.birthday).format('YYYY-MM-DD');
					if (data.inductionDate) data.inductionDate = dayjs(data.inductionDate).format('YYYY-MM-DD');
				},
				upload: function () {
					var file = this.$refs.file.files[0];
					if (!file) return;
					if (file.size > 5.12E5) {
						alert('文件不宜大于500kB');
						return;
					}
					axios.post('/pc/upload/teacher?schoolId=' + this.item.schoolId,
						new FormData(this.$refs.form)).then(function (res) {
							this.item.avatar = res.data.data;
						}.bind(this));

				}
			},
			computed: {
				img: function () {
					if (!this.item.avatar) return '/image/upload.png';
					return '/static/' + this.item.schoolId + '/teacher/' + this.item.avatar;
				},
			},
			watch: {
				'item.name': function (newV) {
					this.item.name = newV.trim()
				},
				'item.bindCode': function (newV) {
					this.item.bindCode = newV.trim()
				},
			}
		}));

		laydate.render({
			elem: '#birthday',
			type: 'date',
			done: function (value, date, endDate) {
				app.item.birthday = value;
			}
		});

		laydate.render({
			elem: '#inductionDate',
			type: 'date',
			done: function (value, date, endDate) {
				app.item.inductionDate = value;
			}
		});

	</script>

</body>

</html>